<template>
  <UseDraggable v-if="isExist"
                @pointerdown="topModalName='ai'"
                class="resize overflow-auto fixed bg-white dark:bg-black  h-5/6 w-[400px] rounded-lg border border-gray-500 drop-shadow"
                :class="[topModalName==='ai'?'z-[100]':'z-[90]',aiModalStatus==='hidden'?'transition-all duration-1000 ease-in-out translate-x-[4000px] opacity-0':'']"
                :handle="handle"
                :initial-value="{ x: width-600, y: 75 }">
    <div class="flex flex-col h-full">
      <div ref="handle" class="cursor-move flex justify-between items-center ">
        <h3 class="hidden sm:block px-1">ChatGPT</h3>
        <div>
          <n-button-group>
            <n-button :disabled="curSessionIsLast " @click="handleSwitch('next')" secondary type="info"> 上一个
            </n-button>
            <n-button :disabled="curSessionIsFirst" @click="handleSwitch('prev')" secondary type="warning"> 下一个
            </n-button>
            <n-button @click="handleCreateNewSession" secondary type="success"> 新会话</n-button>
          </n-button-group>
        </div>
        <div>
          <n-button-group>
            <n-button @click="handleHidden" quaternary>
              <TextIcon tip="最小化" icon="mingcute:minimize-fill"></TextIcon>
            </n-button>
            <n-button @click="handleClose" quaternary>
              <TextIcon tip="关闭" icon="mdi:close"></TextIcon>
            </n-button>
          </n-button-group>
        </div>
      </div>
      <div class="overflow-hidden flex-1">
        <AiSessionView ref="aiSessionViewRef"></AiSessionView>
      </div>
    </div>

  </UseDraggable>

</template>

<script setup lang="ts">


import {computed, watch} from "vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";

import {ref} from 'vue'
import {UseDraggable} from '@vueuse/components'
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import AiSessionView from "@/components/pc/view/AiSessionView.vue";
import {useAiStore, useUserStore} from "@/store";

const {userInfo, isLogin} = storeToRefs(useUserStore())
const handle = ref<HTMLElement | null>(null)

const {aiModalStatus, authModalShow, topModalName} = storeToRefs(useAppStore())
const aiStore = useAiStore()
const {curSessionIsFirst, curSessionIsLast} = storeToRefs(aiStore)
import {useWindowSize} from '@vueuse/core'

const aiSessionViewRef = ref()
const {width} = useWindowSize()
const handleCreateNewSession = () => {
  if (!isLogin.value) {
    aiStore.createNewSession(userInfo.value.username)
  } else {
    window.$message.error('请先登录')
    authModalShow.value = true
  }
}

watch(aiModalStatus, () => {
  if (aiModalStatus.value === 'show') {
    if (aiSessionViewRef.value) {
      aiSessionViewRef.value.doInitRender()
    }

  }
})
const handleSwitch = (direction: 'prev' | 'next') => {
  aiStore.switchSession(direction)
}

const handleClose = () => {
  aiModalStatus.value = 'none'
}

const handleHidden = () => {
  aiModalStatus.value = 'hidden'
}

const isExist = computed(() => {
  return aiModalStatus.value === 'show' || aiModalStatus.value === 'hidden'
})


</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 0;

}


</style>